<div id="app">
    <admin-page-header>
        <bi-button icon="fa-plus" @click="$go({action:'edit'})"  type="primary">添加商品</bi-button>
    </admin-page-header>

    <div class="container">
        <div class="row g-2">
            <div class="col-12">
                <bi-card title="搜索">
                    <div class="row g-3">
                        <div class="col-12 col-sm-3 col-lg-3">
                            <shop-cate v-model="search.cate_id" placeholder="商品分类"></shop-cate>
                        </div>
                        <div class="col-12 col-sm-3 col-lg-3">
                             <bi-select v-model="search.status" placeholder="状态" :option="$pageData.statusList" ></bi-select>
                        </div>
                        
                        <div class="col-12 col-sm-6 col-lg-6">
                            <bi-input v-model="search.keyword"  placeholder="商品名称/商品ID" icon="fa fa-search" ></bi-input>
                        </div>
                    </div>
                </bi-card>
            </div>
            <div class="col-12">
                <bi-card title="商品列表">
                    <bi-table :data="list" :loading="loading"  min-height="300" >
                        <bi-table-column label="状态" name="status_title" width="80" ></bi-table-column>
                        <bi-table-column label="图片"  width="120" v-slot="{row}" >
                            <bi-picture :src="row.picture_main" upload width="100" height="100" border />
                        </bi-table-column>
                        <bi-table-column label="商品名称" name="title" v-slot="{row}" >
                            <div ><b>{{row.title}}</b>
                                <div v-if="row.status=='off'" ><a href="#" @click="onSale(row)" >上架</a></div>
                            </div>
                        </bi-table-column>
                        <bi-table-column label="价格" name="price" v-slot="{row}" width="100" >
                            <div >{{row.price}}</div>
                        </bi-table-column>
                        <bi-table-column label="库存" name="stock" width="100" ></bi-table-column>
                        <bi-table-column label="操作" width="120" v-slot="{row}">

                            <template v-if="row.status!='sale'">
                                <bi-button type="primary" @click="$go({action:'edit',gets:{id:row.goods_id}})">编辑</bi-button>
                                <bi-button type="warning" @click="handleDel(row)" >删除</bi-button>
                            </template>
                            <template v-else>
                                <bi-button type="danger" @click="handleOff(row)" >下架</bi-button>
                            </template>
                        </bi-table-column>
                       </bi-table>

                       <template #footer>
                        <bi-pagination v-model="page" :total="total" :count="count" ></bi-pagination>
                    </template>
                </bi-card>


            </div>
                
        </div>
    </div>

</div>

<script>
import shopCate from 'field/cate.vue';
import {debounce} from '@@/admin/assets/js/global.js';
import onSaleDialog from 'goods/on-sale-dialog.vue';
let app = admin.createApp({
    components:{
        shopCate
    },
    data(){

        let search  = {
            cate_id:'',
            type:'',
            keyword:'',
        }


        this.$assign(search,this.$status.get('search'));
        
        return {
            search,
            list:[],
            loading:false,
            page:this.$status.get('page')??1,
            statusList:this.$pageData.statusList,
            total:0,
            count:0
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                
                this.refresh();
            },1000),
            deep:true
        }       
    },
    methods:{
        refresh(){
            this.loading = true;

            this.$status.set('page',this.page);
            this.$status.set('search',this.search);

            this.$ajax({
                url:this.$url({action:'list'}),
                data:{
                    page_current:this.page,
                    ...this.search
                },
                success:(res)=>{
                     
                    this.list = res.list;
                    this.count  = res.count;
                    this.total =res.total;
                },
                over:()=>{
                    this.loading = false;
                }
            })
        },
        onSale(item){

            this.$dialog({
                title:'上架商品 - ' + item.title,
                type:'vue',
                content:admin.createApp(onSaleDialog,{item}),
                callback:()=>{
                    this.refresh();
                }
            })
        },
        handleOff(item){
            this.$confirm('确认下架商品？',
                ()=>{
                    this.$loading();
                    this.$ajax({
                        url:this.$url({action:'status'}),
                        data:{
                            goods_id:item.goods_id,
                            status:'off'
                        },
                        success:(res)=>{
                            this.$toast('下架成功')
                            this.refresh()
                        },
                        over:()=>{
                            this.$loading(false);
                        }
                    })
                }
            )
        },
        handleDel(item){
            this.$confirm('确认删除商品？',
                ()=>{
                    this.$loading();
                    this.$ajax({
                        url:this.$url({action:'del'}),
                        data:{
                            goods_id:item.goods_id,
                        },
                        success:(res)=>{
                            this.$toast('删除成功')
                            this.refresh();
                        },
                        over:()=>{
                            this.$loading(false);
                        }
                    });
                }
            )
        }
    },
    mounted(){
        this.refresh();
    }

}).mount('#app');
</script>